<template>
 <div>
   <el-form label-width="120px">
     <el-form-item label="商品名称">
       <el-input v-model="good.name" placeholder=""/>
     </el-form-item>
     <el-form-item label="商品价格">
       <el-input v-model="good.price" placeholder=""/>
     </el-form-item>
     <el-form-item label="商品数量">
     <el-input v-model="good.num" placeholder=""/>
   </el-form-item>
     <!-- 所属分类 TODO -->
     <el-form-item label="商品品牌">
       <el-select v-model="good.brandParentId" placeholder="请选择" @change="getBrandTwos(good.brandParentId)">
         <el-option
           v-for="brandOne in brandOnes"
           :key="brandOne.id"
           :label="brandOne.name"
           :value="brandOne.id">
         </el-option>
       </el-select>

       <el-select v-model="good.brand" placeholder="请选择">
         <el-option
           v-for="brandTwo in brandTwos"
           :key="brandTwo.id"
           :label="brandTwo.name"
           :value="brandTwo.id">
         </el-option>
       </el-select>
     </el-form-item>



     <!-- 课程简介 TODO -->
     <el-form-item label="商品状态">
       <el-select  placeholder="请选择" v-model="good.status">
         <el-option  label="正常" :value="1"></el-option>
        <el-option  label="下架" :value="2"></el-option>
       </el-select>
     </el-form-item>



     <el-form-item>
       <el-button :disabled="saveBtnDisabled" type="primary" @click="addCourseAndNext(good.id)">保存并下一步</el-button>
     </el-form-item>
   </el-form>
 </div>
</template>

<script>
import brand from '../../api/brand'
import good from '../../api/good'
export default {
    data(){
      return{
       good:{},
        brandOnes:[],       //商品父品牌
        brandTwos:[],       //商品品牌
        saveBtnDisabled:false, //是否可点击
      }
    },
  methods:{
      //改变下拉框选择
//添加
    addCourseAndNext(){
      good.add(this.good).then(res=>{
        this.$message.success(res.message)
      })
    },
    //父品牌
    getBrandOnes(){
      brand.queryBrandAll().then(res=>{
        //查询所有的副品牌
        this.brandOnes=res.data;
      })
    },
    //子品牌
    getBrandTwos(id){
      console.log(id)
      //根据父id查询
      brand.queryBrandByParentId(id).then(res=>{
        this.brandTwos=res.data;
      })

    },
  },
  created() {
   this.getBrandOnes();

  }
}
</script>

<style scoped>

</style>
